<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
</head>

<body>
    //留言板的发布与删除
    <textarea name="" id="" cols="30" rows="10"></textarea>
    <button>发布</button>
    <ul>

    </ul>
    <script>
        //获取元素
        var textarea = document.querySelector('textarea');
        var btn = document.querySelector('button');
        var ul = document.querySelector('ul');
        //事件源  按钮被点击
        btn.onclick = function () {
            //判断textarea里面是否输入内容
            if (textarea.value == '') {
                alert('您输入的内容为空，请重新输入');
            }
            else {
                //创建节点
                var li = document.createElement('li');
                //把textarea里面的内容赋值给li
                li.innerHTML = textarea.value + "<a href='javascript:;'>删除</a>";
                //添加节点
                ul.appendChild(li);
                //当发布后让textarea内容为空
                textarea.value = '';
            }
            //获取所有的a标签
            var a = document.querySelectorAll('a');
            // 删除元素 删除的是当前链接的li  它的父亲
            for (var i = 0; i < a.length; i++) {
                a[i].onclick = function () {
                    //node.removeChild(child); 删除的是 li 当前a所在的li  this.parentNode;
                    ul.removeChild(this.parentNode);
                }
            }
        }
    </script>
</body>

</html>